import { getallnoticeapi, toreadedapi } from "@/apis/essay";
import { rootState } from "@/store";
import { loginpatch } from "@/store/action/home";
import { usertype } from "@/store/reducers/home";
import { formattime } from "@/utils";
import { message, Modal } from "antd";
import React, { useEffect, useState } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import MdEditor from "md-editor-rt";
import { Noticewrap } from "./styled";
import Routertran from "@/components/routertran";
import { Link } from "react-router-dom";
// import "./style.less";
interface noticeinter {
  id: number;
  createAt: string;
  audit: number;
  pass: number;
  title: number;
  content: string;
}
export default function Notice() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [notice, setNotice] = useState<noticeinter[]>();
  const [curessay, setCuressay] = useState<string>(""); //当前预览的文章
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const { user } = useSelector(
    (store: rootState) => ({
      user: store.home.user as usertype,
    }),
    shallowEqual
  );
  useEffect(() => {
    getallnoticefn();

    const ws = new WebSocket(`ws://localhost:8000/ws/changestatenotice?myid=1`);
    ws.addEventListener("message", (data) => {
      getallnoticefn();
      toreadedapi(user.id);
    });
    //置所有消息为已读
    toreadedapi(user.id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const getallnoticefn = async () => {
    try {
      const re: any = await getallnoticeapi(user.id);
      setNotice(re.result);
    } catch (e) {
      dispatch(loginpatch({}));
      navigate("/");
      message.error("身份失效");
    }
  };
  return (
    <Noticewrap>
      <Modal
        title="文章预览"
        visible={isModalVisible}
        footer={null}
        onCancel={(e) => setIsModalVisible(false)}
        bodyStyle={{ overflow: "auto", height: 500 }}
        width={700}
      >
        <MdEditor modelValue={curessay} previewOnly />
      </Modal>
      {
        <ul>
          {notice && notice.length > 0 ? (
            notice.map((item: noticeinter) => (
              <li key={item.id}>
                {item.audit === 1 ? (
                  <div className="content">
                    你的文章{" "}
                    <span
                      className="title"
                      onClick={(e) => {
                        setCuressay(item.content);
                        setIsModalVisible(true);
                      }}
                    >
                      {item.title}
                    </span>{" "}
                    等待审核
                  </div>
                ) : (
                  <div className="content">
                    你的文章{" "}
                    {item.pass === 0 ? (
                      <span
                        className="title"
                        onClick={(e) => {
                          setCuressay(item.content);
                          setIsModalVisible(true);
                        }}
                      >
                        {item.title}
                      </span>
                    ) : (
                      <Link to={`/essaydetail/${item.id}`}>{item.title}</Link>
                    )}{" "}
                    审核
                    {item.pass === 1 ? (
                      <span className="sucessresult"> 通过</span>
                    ) : (
                      <span className="failresult"> 未通过</span>
                    )}
                  </div>
                )}
                <div className="time">{formattime(item.createAt)}</div>
              </li>
            ))
          ) : (
            <div className="routertran">
              <Routertran
                width={500}
                height={300}
                left={150}
                top={100}
              ></Routertran>
            </div>
          )}
        </ul>
      }
    </Noticewrap>
  );
}
